<template>
  <div class="custom-quality-engineering-container page-common-layout">
    <div class="screen-conditions-container">
      <a-input v-model="modelName" placeholder="请输入评价标准" />
      <!-- 状态 -->
      <a-select
        v-model="modelStatus"
        placeholder="请选择状态"
        :filter-option="filterOption"
      >
        <a-select-option value="1"> 待发布 </a-select-option>
        <a-select-option value="2"> 已发布 </a-select-option>
      </a-select>
      <div class="group-button">
        <a-button class="cu-btn-primary" icon="search" @click="search()">
          查询
        </a-button>
        <a-button class="cu-btn-filter" icon="reload" @click="reset()">
          重置
        </a-button>
      </div>
    </div>
    <div class="table-container">
      <div class="header" header="评价标准">
        <a-button
          @click="exportModel()"
          class="cu-btn-primary margin-bottom-xs"
          icon="upload"
          v-action:pjbz_add
        >
          导入
        </a-button>
      </div>
      <div class="main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            :title="item.title"
            :field="item.key"
            :key="index"
            :min-width="item.width"
            show-overflow
            v-for="(item, index) in columns"
          >
            <template slot-scope="scope">
              <div
                v-if="item.key == 'modelStatus'"
                class="model-status"
                :class="getStatusClass(scope.row[item.key])"
              >
                {{ scope.row[item.key] | filterStatus }}
              </div>
              <span v-else>{{ scope.row[item.key] }}</span>
            </template>
          </vxe-column>
          <vxe-column
            field="operate"
            width="220"
            title="操作"
            fixed="right"
            align="left"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" @click="preview(row)"> 查看 </a-button>
                <a-button
                  type="link"
                  @click="release(row)"
                  v-if="row['modelStatus'] == 1"
                  v-action:pjbz_push
                >
                  发布
                </a-button>
                <a-button
                  type="link"
                  class="danger"
                  @click="handleDelClick(row)"
                  v-if="row['modelStatus'] == 1"
                  v-action:pjbz_delete
                >
                  删除
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>

    <!-- 导入弹窗 -->
    <exportModal
      :visible.sync="exportModalVisible"
      :key="modalKey"
    ></exportModal>

    <!-- 查看页面 -->
    <viewModal
      :visible.sync="viewModalVisible"
      :soucre="dataSoucre"
      @ok="handelOk()"
      @cancel="handelCancel()"
    ></viewModal>
  </div>
</template>
<script>
import { axios } from "@/utils/request";
import exportModal from "./components/exportModal";
import viewModal from "./components/viewModal";
export default {
  components: {
    exportModal,
    viewModal,
  },
  filters: {
    filterStatus(val) {
      let value = Number(val);
      switch (value) {
        case 1:
          return "未发布";

        case 2:
          return "已发布";

        default:
          return "--";
      }
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
      columns: [
        {
          title: "名称",
          dataIndex: "modelName",
          key: "modelName",
        },
        {
          title: "创建人",
          dataIndex: "creator",
          key: "creator",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "状态",
          dataIndex: "modelStatus",
          key: "modelStatus",
        },
      ],
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      //模型名称
      modelName: "",
      //状态
      modelStatus: undefined,
      modalKey: 0,
      //
      exportModalVisible: false,
      //
      viewModalVisible: false,
      dataSoucre: {},
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    //查看
    preview(row) {
      this.dataSoucre = row;
      this.viewModalVisible = true;
    },
    handelOk() {
      this.viewModalVisible = false;
      this.getTableData();
    },
    handelCancel() {
      this.viewModalVisible = false;
      this.getTableData();
    },

    //导入
    exportModel() {
      this.modalKey = Date.now();
      this.exportModalVisible = true;
    },
    search() {
      this.pager.page = 1;
      this.getTableData();
    },

    reset() {
      this.modelName = "";
      this.modelStatus = undefined;
      this.search();
    },
    //发布
    release(row = {}) {
      let that = this;
      that.$confirm({
        title: "提示",
        content: "您确定发布吗?",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          that
            .$get(`/probusiness/qeModel/publish?uuid=${row.uuid}`)
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("发布成功", 1.5);
                that.getTableData();
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {});
        },
      });
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    getStatusClass(val) {
      let value = Number(val);
      switch (value) {
        case 1:
          return "normal";

        case 2:
          return "release";

        default:
          return "default";
      }
    },

    //删除
    handleDelClick(row) {
      let dataLength = this.tableData.length;
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          that
            .$post(`/probusiness/qeModel/deleteBatch`, {
              varchar: row.uuid,
            })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("删除成功", 1.5);
                if (dataLength == 1 && that.pager.page > 1) {
                  that.pager.page -= 1;
                }
                that.getTableData();
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {});
        },
      });
    },

    //查询列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { modelName, modelStatus = "" } = this;
      axios
        .post(
          `/probusiness/qeModel/getPageSet?pageNo=${page}&pageSize=${pageSize}`,
          {
            modelStatus,
            modelName,
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          this.tableData = res?.rows ?? [];
          this.pager.total = res?.totalCount ?? 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
  },
};
</script>
<style lang="less" scoped>
.custom-quality-engineering-container {
  .model-status {
    width: 60px;
    border-radius: 2px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    &.normal {
      background: #f1f2f7;
      color: #aab0bc;
    }
    &.release {
      background: #4bc964;
      color: #fff;
    }
    &.default {
      background: none;
      color: #aab0bc;
    }
  }
}
</style>
